<template>
	<div>
		<Form label-position="top">
	        <FormItem label="间距设置">
	        	<div class="ui-slider-group">
	        		<div class="label">顶部外边距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.margin"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">上下间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingy"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">左右间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingx"></Slider>
	        		</div>
	        	</div>
	        </FormItem>
	        <FormItem label="显示样式">
	            <RadioGroup v-model="value.style">
			        <Radio :label="0">橱窗样式</Radio>
			        <Radio :label="1">列表样式</Radio>
			        <Radio :label="2">滚动样式</Radio>
			    </RadioGroup>
	        </FormItem>
	        <FormItem label="领券文字颜色">
	            <ColorPicker v-model="value.color"></ColorPicker>
	            <span style="margin-left: 10px; color: #999;">请选择领券文字颜色</span>
	        </FormItem>
	        <FormItem label="领券按钮颜色">
	            <ColorPicker v-model="value.btnColor"></ColorPicker>
	            <span style="margin-left: 10px; color: #999;">请选择领券按钮背景颜色</span>
	        </FormItem>
	        <FormItem label="领取数量">
	            <RadioGroup v-model="value.showType">
			        <Radio :label="0">不显示</Radio>
			        <Radio :label="1">显示剩余数量</Radio>
			        <Radio :label="2">显示领取人数</Radio>
			    </RadioGroup>
	        </FormItem>
	    </Form>
        <div class="ui-picture-cells">
        	<div class="ui-picture-cell" v-for="(item, index) in value.lists">
				<div class="config">
					<Form :label-width="74">
						<FormItem label="优惠券类型">
				            <Select v-model="item.type" placeholder="请选择优惠券类型">
						        <Option :value="1">测试</Option>
						    </Select>
				        </FormItem>
				        <FormItem label="优惠券选择">
				            <Select v-model="item.id" placeholder="请选择优惠券">
						        <Option :value="1">测试</Option>
						    </Select>
				        </FormItem>
					</Form>
				</div>
				<div class="remove" @click="handleRemove(index)"><Icon type="ios-close-circle" color="#1ba2fc" :size="16" /></div>
			</div>
			<Button @click="handleAdd" long icon="md-add" class="add-btn">添加一个优惠券</Button>
        </div>
	</div>
</template>

<script>
export default {
	name: 'couponConfig',
	props: {
		value: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	methods: {
		handleAdd() {
			this.value.push({type: '', id: ''});
		},
		handleRemove(index) {
			this.value.splice(index, 1);
		}
	}
}
</script>

<style>
</style>